<template>
  <div class="pad-20 bgc-default" v-loading="fullLoading" element-loading-text="加载中">
    <div class="bg-color-white">
      <div class="apply-info">
        <div class="apply-title">基本信息</div>
        <div class="pad-30 apply-block">
          <div class="apply-item">
            <h3>申请人信息</h3>
            <div class="font-18">
              <label>申请店主：</label>
              <span>{{applyObj.realName}}</span>
            </div>
            <div>
              <label>云店名称：</label>
              <span>{{applyObj.nickname}}</span>
            </div>
            <div>
              <label>申请时间：</label>
              <span>{{applyObj.createTime}}</span>
            </div>
          </div>
          <div class="apply-item">
            <h3>基本信息</h3>
            <div>
              <label>直播标题：</label>
              <span>{{applyObj.roomName}}</span>
            </div>
            <div>
              <label>开播时间：</label>
              <span>{{applyObj.startDate}}</span>
            </div>
            <div>
              <label>结束时间：</label>
              <span>{{applyObj.endDate}}</span>
            </div>
            <div>
              <label>主播昵称：</label>
              <span>{{applyObj.anchorName}}</span>
            </div>
            <div>
              <label>主播微信号：</label>
              <span>{{applyObj.anchorWechat}}</span>
            </div>
          </div>
          <div class="apply-item apply-set">
            <h3>直播间配置</h3>
            <div>
              <div class="flex">
                <div class="set-align mar-r-60">
                  <label>分享卡片样式设置：</label>
                  <img class="width-102 height-63" :src="applyObj.shareImg" alt="" @click="downloadImg(applyObj.shareImg)">
                </div>
                <div class="set-align">
                  <label>直播间背景墙：</label>
                  <img class="width-89 height-132" :src="applyObj.coverImg" alt="" @click="downloadImg(applyObj.coverImg)">
                </div>
              </div>
              <div class="flex">
                <div class="set-align mar-r-60">
                  <label>购物直播频道样式：</label>
                  <img class="width-102 height-63" :src="applyObj.feedsImg" alt="" @click="downloadImg(applyObj.feedsImg)">
                </div>
                <div>
                  <label>直播间功能：</label>
                  <template v-if="applyObj.closeComment == 0">
                    <span>评论</span>
                  </template>
                  <template v-if="applyObj.closeComment == 0 && applyObj.closeLike == 0">
                    <span class="pad-l-3 pad-r-3">/</span>
                  </template>
                  <template v-if="applyObj.closeLike == 0">
                    <span>点赞</span>
                  </template>
                  <template v-if="applyObj.closeLike == 0 && applyObj.closeGoods == 0">
                    <span class="pad-l-3 pad-r-3">/</span>
                  </template>
                  <span v-if="applyObj.closeGoods == 0">商品货架</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pad-l-12 pad-r-12">
        <div class="tabs-box mar-t-15">
          <el-tabs
            v-model="searchListQuery.seachType"
            @tab-click="changeSeach"
          >
            <el-tab-pane label="全部商品" name="0"></el-tab-pane>
            <el-tab-pane label="店主自营商品" name="1"></el-tab-pane>
            <el-tab-pane label="企业商品" name="2"></el-tab-pane>
          </el-tabs>
        </div>
        <div>
          <template v-if="applyObj.applyStatus !== 2">
            <el-button type="primary" @click="saveSynchronousAudit">同步审核进度</el-button>
            <el-button type="primary" @click="liveGoodsJoin()" class="mar-l-12" v-if="applyObj.roomId">导入所有审核通过商品</el-button>
          </template>
        </div>
        <div class="goods-list mar-t-15">
          <el-table ref="multipleTable" :data="goodsList" @selection-change="handleSelectionChange" v-loading="listLoading"
                    element-loading-text="加载中" style="width: 100%">
            <el-table-column min-width="200px" label="基本信息">
              <template slot-scope="scope">
                <div class="flex v-align-c cursor-p">
                  <label><img :src="scope.row.goodsImgUrl" class="user-avatar"></label>
                  <div class="font-14 pad-l-10">
                    <div>{{scope.row.title}}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column min-width="120px" label="价格" align="left">
              <template slot-scope="scope">
                <span v-if="scope.row.priceType === 1">{{scope.row.price}}元</span>
                <span v-if="scope.row.priceType === 2">{{scope.row.minPrice}}元~{{scope.row.maxPrice}}元</span>
                <span v-if="scope.row.priceType === 3">
                  <span>原价{{scope.row.originalPrice}}元</span><br/>
                  <span>现价{{scope.row.nowPrice}}元</span>
                </span>
              </template>
            </el-table-column>
            <el-table-column min-width="280px" label="链接" align="left" prop="goodsMiniUrl"></el-table-column>
            <el-table-column min-width="100px" label="微信审核状态" align="left">
              <template slot-scope="scope">
                {{ dict.auditStatus[scope.row.auditStatus]}}
              </template>
            </el-table-column>
            <!-- <el-table-column width="350px" label="操作" align="center">
              <template slot-scope="scope">
                <template v-if="applyObj.applyStatus !== 2">
                  <a @click="getApplyGoods(scope.row)" v-if="scope.row.auditStatus === 0 || scope.row.auditStatus === 3" style="color: #0000ff">提交审核</a>
                  <a @click="liveGoodsJoin(scope.row)" v-if="scope.row.auditStatus === 2 && scope.row.isImport == 0 && applyObj.roomId" style="color: #0000ff">导入直播间</a>
                </template>
                <template v-else>
                  <span>导入成功</span>
                </template>
              </template>
            </el-table-column> -->
          </el-table>
          <div class="page-layout pad-b-20">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="searchListQuery.currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="searchListQuery.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 80px;"></div>
    <div class="btn-row">
      <template v-if="applyObj.applyStatus == 0">
        <el-button @click="$router.go(-1)">返回</el-button>
        <el-button type="primary" @click="doAgree">同意</el-button>
        <el-button type="danger" @click="doReject" plain>拒绝</el-button>
      </template>
    </div>
    <!-- 拒绝通过 -->
    <el-dialog title="不同意理由：" :visible.sync="financeVisible" :close-on-press-escape="true" width="460px">
      <div style="padding:20px;">
        <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="applyObj.reject"></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doSubmit(2)">不同意申请</el-button>
        <el-button @click="financeVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="" :visible.sync="liveGoodsVisible" :close-on-press-escape="true" :center="true" width="850px">
      <el-form :model="liveGoods" label-position="right" label-width="120px">
        <el-form-item label="商品封面" >
          <img v-if="liveGoods.goodsImgUrl" :src="liveGoods.goodsImgUrl" width="148px" height="148px" style="margin-left: -1px;margin-top: -1px;"/><br/>
          <span>建议尺寸：200像素 * 200像素，图片大小不得超过50K。</span>
        </el-form-item>
        <el-form-item label="商品名称" >
          <el-input v-model="liveGoods.title" class="width-per-70" placeholder="请输商品名称"></el-input><br/>
          <span>商品名称必须为3-14个汉字（一个字等于两个英文字符或特殊字符）</span>
        </el-form-item>
        <el-form-item label="价格形式" >
          <el-radio-group v-model="priceType">
            <el-radio v-if="liveGoods.skuFlag == 0" label="1" class="mar-b-10" :disabled="booleanPrice">
              <span class="width-100 display-inline">一口价</span>
              <span>价格</span>
              <el-input v-model="liveGoods.price" class="width-180" type="number" :disabled="true">
                <template slot="append">元</template>
              </el-input>
            </el-radio><br/>
            <el-radio v-if="liveGoods.skuFlag == 1" label="2" class="mar-b-10">
              <span class="width-100 display-inline">价格区间</span>
              <span>价格</span>
              <el-input v-model="liveGoods.minPrice" class="width-180" :disabled="true">
                <template slot="append">元</template>
              </el-input>
              <span class="width-20 display-inline text-align-c">-</span>
              <el-input v-model="liveGoods.maxPrice" class="width-180" type="number" :disabled="true">
                <template slot="append">元</template>
              </el-input>
            </el-radio><br/>
            <el-radio v-if="liveGoods.skuFlag == 0" label="3" class="mar-b-10" :disabled="booleanPrice">
              <span class="width-100 display-inline">显示折扣价</span>
              <span>价格</span>
              <el-input v-model="liveGoods.originalPrice" class="width-180" :disabled="true">
                <template slot="append">元</template>
              </el-input>
              <span class="width-20 display-inline text-align-c"></span>
              <span>现价</span>
              <el-input v-model="liveGoods.nowPrice" class="width-180" type="number" :disabled="true">
                <template slot="append">元</template>
              </el-input>
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="width-110" @click="addLiveGoods(1)">提交审核</el-button>
        <el-button class="width-110" @click="liveGoodsVisible = false">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { getLiveRoomApply, saveRoom } from '@/api/user/liveRoomApply'
  import { pageLiveRoomApplyGoods, saveLiveRoomGoods, getApplyGoods } from '@/api/user/liveRoomApplyGoods'
  import { saveSynchronousAudit } from '@/api/goods/liveGoods'
  import { downloadFile } from '@/api/common/common'
  import { addLiveGoods } from '@/api/goods/liveGoods'

  export default {
    data() {
      return {
        applyId: '',
        // 申请对象
        applyObj: {
          applyId: ''
        },
        liveGoods: {},
        priceType: '1',
        total: 0,
        listLoading: false,
        financeVisible: false,
        liveGoodsVisible: false,
        booleanPrice: false,
        dict: {},
        // 页面loading
        fullLoading: false,
        searchListQuery: {
          currentPage: 1,
          size: 10,
          applyId: this.applyId,
          seachType: '0'
        },
        goodsList: [],
        disabled: false
      }
    },
    created() {
      const queryParams = this.getCurrentPage().query
      if (queryParams.applyId) {
        this.applyId = queryParams.applyId
        this.init()
        this.initGoodsList()
      }
    },
    methods: {
      // 初始化申请信息
      init() {
        this.fullLoading = true
        getLiveRoomApply(this.applyId).then(response => {
          this.fullLoading = false
          if (response.isError) return
          this.applyObj = response.data
        })
      },
      initGoodsList() {
        this.listLoading = true
        this.searchListQuery.applyId = this.applyId
        pageLiveRoomApplyGoods(this.searchListQuery).then(response => {
          if (response.isError) return
          this.total = response.data.total
          this.goodsList = response.data.records
          if (response.data.dict) {
            this.dict = response.data.dict
          }
          this.listLoading = false
        })
      },
      addLiveGoods(auditStatus) {
        this.liveGoods.priceType = this.priceType
        this.liveGoods.enterpriseId = this.getEnterpriseId()
        this.liveGoods.auditStatus = auditStatus
        if (!this.liveGoods.title || this.liveGoods.title.length > 13 || this.liveGoods.title.length < 3) {
          this.$message.error('商品名称必须为3-14个汉字')
          return
        }
        this.saveGoods()
      },
      saveGoods() {
        addLiveGoods(this.liveGoods).then(response => {
          if (response.isError) return
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.liveGoodsVisible = false
          this.initGoodsList()
        })
      },
      // 同意事件
      doAgree() {
        this.$confirm('同意申请前，请确认所有商品已通过小程序直播管理后台审核。', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.doSubmit(1)
        }).catch(() => {
          this.$message({ type: 'info', message: '已取消' })
        })
      },
      // 拒绝事件
      doReject() {
        this.financeVisible = true
      },
      // 审核提交事件
      doSubmit(applyStatus) {
        if (applyStatus === 2 && !this.applyObj.reject) {
          this.$message.error('请填写拒绝理由')
          return
        }
        const submitform = {
          applyId: this.applyObj.applyId,
          applyStatus: applyStatus,
          reject: this.applyObj.reject
        }
        this.fullLoading = true
        saveRoom(submitform).then(response => {
          this.fullLoading = false
          if (response.isError) return
          this.$message({ type: 'success', message: '保存成功!' })
          this.financeVisible = false
          this.$router.go(-1)
        })
      },
      // 图片下载事件
      downloadImg(fileUrl) {
        downloadFile(fileUrl, {}, '附件')
      },
      saveSynchronousAudit() {
        saveSynchronousAudit(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.$message({
            message: '成功',
            type: 'success'
          })
          this.initGoodsList()
        })
      },
      getApplyGoods(row) {
        getApplyGoods(row.roomGoodsId).then(response => {
          if (response.isError) return
          this.liveGoods = response.data
          this.priceType = response.data.priceType ? response.data.priceType + '' : '1'
          if (!response.data.originalPrice && response.data.originalPrice === '0.00') {
            this.booleanPrice = true
          } else {
            this.booleanPrice = false
          }
          this.liveGoodsVisible = true
        })
      },
      liveGoodsJoin(row) {
        let roomGoodsId = ''
        if (row) {
          roomGoodsId = row.roomGoodsId
        }
        saveLiveRoomGoods(roomGoodsId, this.applyId, this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.$message({
            type: 'success',
            message: '成功!'
          })
          this.initGoodsList()
        })
      },
      changeSeach() {
        this.initGoodsList()
      },
      // 勾选事件
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initGoodsList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initGoodsList()
      }
    }
  }
</script>
<style lang="less" scoped>
.apply-info{
  border-radius: 10px;
  border: 1px solid #edeff6;
  background-color: #fff;
  .apply-title{
    height: 58px;
    line-height: 58px;
    font-size: 20px;
    position: relative;
    padding-left: 40px;
    border-bottom: 1px solid #edeff6;
    &::before{
      content: '';
      position: absolute;
      height: 22px;
      width: 2px;
      background-color: #409eff;
      top: 50%;
      transform: translateY(-50%);
      left: 20px;
    }
  }
}
.apply-block{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  .apply-item{
    height: 304px;
    width: 400px;
    padding: 5px 30px;
    box-sizing: border-box;
    margin-right: 20px;
    border-right: 2px solid #edeff6;
    &:last-child{
      border-right: unset;
    }
    .mar-r-60{
      margin-right: 60px;
    }
    .set-align{
      label{
        vertical-align: top;
      }
      img{
        margin-top: 9px;
      }
    }
    h3{
      font-size: 24px;
      line-height: 30px;
      color: #333333;
      margin-top: unset;
      font-weight: bold;
    }
    label{
      color: #999999;
      font-size: 18px;
      line-height: 30px;
      font-weight: unset;
    }
    span{
      color: #333333;
      font-size: 18px;
      line-height: 30px;
    }
  }
  .apply-set{
    width: 700px;
  }
}
  .user-avatar{
    width: 68px;
    height: 68px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }
.base-info{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 30px 30px;
  background: white;
  height: 335px;
}
.link-color{
  color: rgb(0, 0, 255);
}
.row_label{
  width: 80px;
  display: inline-block;
}
.vertical-line{
  width: 2px;
  background: #999999;
  height: 100%;
}
.base-info_row{
  margin-top: 5px;
}
.goods-list{
  background: white;
}
.status-pass{
  color: rgb(103, 194, 58);
}
.status-fail{
  color: rgb(255, 0, 0);
}
.page-layout{
  margin-top: 20px;
  text-align: right;
}
.btn-row{
  text-align: center;
  height: 66px;
  line-height: 66px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9;
}
</style>
